<template>
  <div>
    <van-nav-bar title="消息" eft-arrow fixed placeholder>
      <template #right> ⋮ </template>
    </van-nav-bar>
    <!-- 操作区 -->
    <div class="msg-opear">
      <van-cell
        v-for="item in opearlist"
        :key="item.key"
        :border="false"
        :title="item.text"
        is-link
        :center="true"
        replace
        :to="item.url"
      >
        <template #icon>
          <van-image
            src="https://img.yzcdn.cn/vant/cat.jpeg"
            width="50px"
            height="50px"
            round
            style="margin-right: 8px"
          />
        </template>
      </van-cell>
    </div>
    <!-- 信息区域 -->
    <div class="msg-note">
      <div class="note-item msg-flex-box" v-for="item in 100" :key="item">
        <van-image src="https://img.yzcdn.cn/vant/cat.jpeg" width="50px" height="50px" round />
        <div class="name">
          <span>用户昵称</span>
          <span class="fs-color-6"
            >内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息内容信息</span
          >
        </div>
        <div class="time">
          <span class="fs-color-6">昨天</span>
          <van-badge dot />
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { reactive, toRefs, onBeforeMount, onMounted, readonly } from 'vue'
export default {
  name: 'message_home',
  setup() {
    const data = reactive({})
    const opearlist = readonly([
      { key: 'friends-o', text: '@我的', url: '/message/ait_me' },
      { key: 'like-o', text: '收到的赞', url: '' },
      { key: 'setting-o', text: '系统通知', url: '' },
      { key: 'chat-o', text: '评论/回复', url: '' }
    ])
    onBeforeMount(() => {})
    onMounted(() => {})
    return {
      ...toRefs(data),
      opearlist
    }
  }
}
</script>

<style scoped lang='scss'>
.msg-flex-box {
  display: flex;
}
.fs-color-6 {
  color: #666666;
}
.msg-note {
  padding: var(--van-cell-vertical-padding) var(--van-cell-horizontal-padding);
  .note-item {
    margin-bottom: 20px;
    & .van-image {
      flex-shrink: 0;
    }
    .name {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 5px;
      & > span:nth-child(2) {
        display: -webkit-box;
        word-break: break-all;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 1; //需要显示的行数
        overflow: hidden;
        text-overflow: ellipsis;
      }
    }
    .time {
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      align-items: center;
      flex-shrink: 0;
      margin-left: auto;
    }
  }
}
</style>